<template>
  <view class="content" @touchstart="startTouch" @touchend="endTouch">
    <view class="content_image">
      <image :src="song_image" mode=""></image>
    </view>
    <uni-nav-bar left-icon="left" :song_static='song_static' fixed color="#ffffff" background-color="#1A1A1A"
      :height="barheight" title=" " />
    <view class="music_content_left">
      <view class="">
        <!--播放机图片-->
        <image src="/static/musicpage/player.png"></image>
        <view>
          <image :src="song_image"></image>
        </view>
      </view>

      <view>
        <!--歌曲信息和播放-->
        <view class="song_singer">
          <!--歌曲名，歌手，是否收藏-->
          <view>
            <view>
              <text>{{song_title}}</text>
            </view>
            <text>{{songer}}</text>
          </view>
          <view class="">
            <image @click="loveimage" :src="lovesrc" style="width: 70rpx;height: 70rpx;"></image>
          </view>
        </view>

        <view class="">
          <text>{{song_word}}</text>
        </view>

        <view>
          <!--评论 菜单-->
          <view>
            <image src="/static/musicpage/download.png"></image>
          </view>
          <view>
            <image src="/static/musicpage/comments.png"></image>
          </view>
          <view>
            <image src="/static/musicpage/more.png"></image>
          </view>
        </view>

        <view class="music_progress">
          <!--歌曲进度条-->
          <view>
            <van-slider @change="timeChange" :max="music_max" min="0" @drag-end="setTimeplay" :value="song_progress"
              bar-height="3px" inactive-color="#7A7A7A" active-color="#ffffff" step="1" />

          </view>
          <view>
            <text>{{song_start_time}}</text>
            <text>{{song_end_time}}</text>
          </view>
        </view>

        <view class="music_play_stop">
          <!-- 暂停，播放 随机 -->
          <image @click="musci_loop_way" :src="music_loop_src"></image>
          <image src="/static/musicpage/before.png"></image>
          <image @click="music_stop" :src="music_src"></image>
          <image src="/static/musicpage/after.png"></image>
          <image src="/static/musicpage/song_list.png"></image>
        </view>

      </view>

    </view>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        clientX: 0,
        clientY: 0,
        wh: "100%",
        ww: "100%",
        barheight: "100",
        song_image: '',
        ground_image: '',
        song_title: "",
        songer: "",
        song_word: "",
        s_src: "",
        sog_object: '',
        music_src: "/static/musicpage/start.png",
        song_start_time: this.$store.state.song_now_time,
        music_max: 300,
        song_progress: this.$store.state.song_progress,
        song_progress_last: 0,
        song_end_time: this.$store.state.song_end_time,
        user_love: this.$store.state.love_song,
        song_static: true,
        lovesrc: "/static/musicpage/like.png",
        music_loop_src: '/static/musicpage/one_loop.png'
      }
    },
    onShow: function(option) {
      clearInterval(this.$store.state.song_setInterv)
      if (this.$store.state.love_song == true) {
        this.lovesrc = "/static/musicpage/like_fill.png"
        this.$store.commit('setLove_song', true)
        this.user_love = this.$store.state.love_song
      } else if (this.$store.state.love_song == false) {
        this.lovesrc = "/static/musicpage/like.png"
        this.$store.commit('setLove_song', false)
        this.user_love = this.$store.state.love_song
      }
      this.song_image = this.$store.state.song_imgurl
      this.s_src = this.$store.state.song_src
      //循环判断歌曲播放进度更新数据
      let song_setInterv = setInterval(async () => {
        let aa = uni.getBackgroundAudioManager()
        let paus = aa.paused
        //循环获取本地播放的歌曲
        if(uni.getStorageSync('song_history')==""){
          //没有歌曲无法播放
          console.log("没有歌曲无法播放")
        }else {
          let value=JSON.parse(uni.getStorageSync('song_history'))
          if(value.length==1){
            this.song_title=value[0].song_title
            this.s_src=value[0].song_src
            this.songer=value[0].song_singer
            this.song_image=value[0].song_image
            this.song_word=value[0].song_word
          }else if(value.length>1){
            this.song_title=value[value.length-1].song_title
            this.s_src=value[value.length-1].song_src
            this.songer=value[value.length-1].song_singer
            this.song_image=value[value.length-1].song_image
            this.song_word=value[value.length-1].song_word
          }else{
            console.log("没有任何历史记录")
          }
        }
        if (paus == false) {
          this.$store.state.song_title=this.song_title
          this.$store.state.song_singer= this.songer
          this.$store.state.song_src=this.s_src
          this.$store.state.song_imgurl=this.song_image
          this.music_max=aa.duration
          this.music_src = "/static/my/play.png"
          this.$store.commit('setSong_progress', Math.floor(aa.currentTime))
          this.$store.commit('setSong_now_time', Math.floor(aa.currentTime))
          this.$store.commit('setSong_end_time', Math.floor(aa.duration))
          this.song_progress = this.$store.state.song_progress
          this.song_start_time = this.$store.state.song_now_time
          this.song_end_time = this.$store.state.song_end_time
          this.song_static = paus //向自定义导航栏传值用于返回传值
        } else if (paus == true) {
          this.music_src = "/static/my/stop.png"
          this.song_static = paus //向自定义导航栏传值用于返回传值
        } else {
          return
        }

      }, 500)
      //全局保存要删除的定时器对象，定时器跳出页面依旧有效
      //不删除有问题
      this.$store.commit('setSong_setInterv', song_setInterv)
    },
    methods: {

      loveimage() { //判断是否收藏歌曲
        if (this.user_love == true) {
          this.lovesrc = "/static/musicpage/like.png"
          this.$store.commit('setLove_song', false)
          this.user_love = this.$store.state.love_song
        } else if (this.user_love == false) {
          this.lovesrc = "/static/musicpage/like_fill.png"
          this.$store.commit('setLove_song', true)
          this.user_love = this.$store.state.love_song
        }
      },

      musci_loop_way() { //判断循环方式

        if (this.$store.state.music_loop == 'loop_one') {
          this.$store.commit('setMusic_loop', 'random')
          this.music_loop_src = "/static/musicpage/random.png"
        } else if (this.$store.state.music_loop == 'random') {
          this.$store.commit('setMusic_loop', 'loop_list')
          this.music_loop_src = "/static/musicpage/list_loop.png"
        } else if (this.$store.state.music_loop == 'loop_list') {
          this.$store.commit('setMusic_loop', 'loop_one')
          this.music_loop_src = "/static/musicpage/one_loop.png"
        }
      },

      // 按钮点击暂停播放，如无背景音乐对象直接播放页面传递来的参数歌源
      // 也是上一次的历史最后播放歌曲
      music_stop() {
        let aa = uni.getBackgroundAudioManager()
        if (aa.paused == true && this.s_src != '') {
          this.music_src = "/static/my/play.png"
          this.$store.commit('setSong_play_static', false)
          //播放歌曲
          aa.play()
        } else if (aa.paused == false) {
          this.music_src = "/static/my/stop.png"
          this.$store.commit('setSong_play_static', true)
          aa.pause()

        } else {
          this.music_src = "/static/my/play.png"
          //播放歌曲
          this.$music(this.s_src, this.song_title, this.songer, this.song_image)
        }
      },
      timeChange(e) { //进度值改变后触发
        this.$store.commit('setSong_now_time', e.detail)
        this.song_start_time = this.$store.state.song_now_time
        this.song_progress_last = e.detail
        this.$setTimeplay(this.song_progress_last,this.s_src, this.song_title, this.songer, this.song_image)
      },
      setTimeplay() { //结束拖动时触发
        this.$setTimeplay(this.song_progress_last,this.s_src, this.song_title, this.songer, this.song_image)
      },
      startTouch(e) { //@touchstart 触摸开始
        this.clientX = e.changedTouches[0].clientX; //手指按下时的X坐标         
        this.clientY = e.changedTouches[0].clientY; //手指按下时的Y坐标
      },
      endTouch(e) { //@touchend触摸结束
        //在事件结束时，判断滑动的距离是否达到要求
        if ((this.clientX - e.changedTouches[0].clientX) > 50) {
          uni.navigateTo({
            url: '/pages/musicword/musicword'
          })
        }
      }
    },

    onUnload() { //监听离开页面，进入别的页面
      console.log("离开音乐播放页面")
      uni.$emit("clickLeft", this.song_static);
    }

  }
</script>

<style lang="scss">
  @mixin _flex($flex) {
    display: flex;
    flex-direction: $flex;
  }

  @mixin text_scr {
    overflow-x: scroll;
    white-space: nowrap;
  }


  .van-slider__button {
    width: 34rpx !important;
    height: 34rpx !important;
  }

  //---------整个页面分两半-----------
  .content {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;

    /*背景模糊图片样式*/
    .content_image {
      width: 100vh;
      height: 100%;
      left: 0;
      top: 0;
      position: absolute;
      z-index: 0;

      >image {
        position: absolute;
        left: 0;
        top: 80%;
        transform: translate(-50%, -50%);
        filter: blur(100px);
        width: 100%;
        height: 100%;
        filter: brightness(1);
        /* 设置亮度值，范围：0-1 */
        animation: imag 10s ease infinite;
      }

      @keyframes imag {
        0% {
          transform: rotate(0deg);
          filter: brightness(0.5) blur(50px);
        }

        20% {
          transform: rotate(-90deg);
          filter: brightness(1) blur(100px);
        }

        50% {
          transform: rotate(-180deg);
          filter: brightness(0.5) blur(50px);
        }

        75% {
          transform: rotate(-270deg);
          filter: brightness(1) blur(100px);
        }

        100% {
          transform: rotate(-360deg);
          filter: brightness(0.5) blur(50px);
        }
      }
    }

    /*----------左半部分显示歌曲信息--------------*/
    .music_content_left {
      position: relative;
      width: 100%;
      height: 90%;
      text-align: center;

      /* 播放机图片 */
      >view:nth-child(1) {
        width: 100%;
        height: 47.5%;
        position: absolute;

        >image {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          width: 580rpx;
          height: 560rpx;
        }

        >view {
          background-color: #474747;
          border-radius: 50%;
          position: absolute;
          overflow: hidden;
          top: 50%;
          left: 50%;
          transform: translate(-47%, -51%);
          width: 300rpx;
          height: 300rpx;

          >image {
            width: 300rpx;
            height: 300rpx;
            animation: images 10s linear infinite;
          }

          @keyframes images {
            0% {
              transform: rotate(0deg);
            }

            20% {
              transform: rotate(-90deg);
            }

            50% {
              transform: rotate(-180deg);
            }

            75% {
              transform: rotate(-270deg);
            }

            100% {
              transform: rotate(-360deg);
            }
          }
        }
      }


      >view:nth-child(2) {
        height: 47.5%;
        width: 90%;
        left: 50%;
        transform: translateX(-50%);
        position: absolute;
        top: 50%;
        color: white;

        >view {
          height: 20%;
        }

        /*--歌曲名,歌手--*/
        >.song_singer {
          height: 25%;
          width: 100%;
          @include _flex(row);
          align-items: center;

          >view:nth-child(1) {
            width: 80%;
            text-align: left;

            >view {
              line-height: 80rpx;
              text-align: left;
              width: 100%;
              @include text_scr font-size: 45rpx;
              margin: 0 20rpx;
              height: 80rpx;
              color: white;

              /* 更改滚动条大小 */
              &::-webkit-scrollbar {
                width: 0;
                height: 0;
              }
            }

            >text:nth-child(2) {
              color: #7A7A7A;
              padding-left: 20rpx;
              font-size: 30rpx;
            }
          }

          >view:nth-child(2) {
            padding: 10rpx;
            width: 20%;
            text-align: right;
          }

        }

        /*--歌词--*/
        >view:nth-child(2) {
          height: 15%;
          text-align: left;
          color: #7A7A7A;
          @include _flex(row) align-items: center;
          margin-left: 20rpx;
          width: 100%;
          margin-bottom: 5%;
          overflow-y: scroll;
          > text {
            height: 100%;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }

        >view:nth-child(3) {
          /*--评论,菜单--*/
          height: 15%;
          @include _flex(row) align-items: center;

          >view {
            width: 33.3%;
          }

          image {
            width: 50rpx;
            height: 50rpx;
          }
        }

        .music_progress {
          /*--进度条--*/
          height: 10%;
          @include _flex(column) width: 93%;
          margin: 0 auto;

          >view:nth-child(1) {
            margin: 3% 0 2% 0;
          }

          >view:nth-child(2) {
            @include _flex(row) align-items: center;
            justify-content: space-between;
            font-size: 28rpx;
          }
        }

        .music_play_stop {
          height: 20%;
          margin: 2% auto 0 auto;
          @include _flex(row) align-items: center;
          justify-content: space-between;
          width: 95%;

          image {
            width: 50rpx;
            height: 50rpx;
          }

          image:nth-child(3) {
            width: 120rpx;
            height: 120rpx;
          }
        }
      }
    }

    /* 更改滚动条大小 */
    &::-webkit-scrollbar {
      width: 0;
      height: 0;
    }

  /* 更改滚动条大小 */
  &::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
  }
</style>
